<template>
  <div style="height: 100%;background-color: #01001C;">
    <video id="videoElement" poster="../../assets/imgs/cs.jpg" autoplay controls width="100%" height="455" />
  </div>
</template>

<script>
import { getAllTribunalEquipmentListByType } from '@/api/tribunalEquipment'
import flvjs from 'flv.js'
export default {
  name: '',
  props: {
    tribunal6: {
      type: Number, // 类型
      default: () => {
      } // 默认值
    }
  },
  data() {
    return {
      week: null,
      isShow: false,
      times: null,
      times2: null,
      hostList: [],
      TribunalOptions: [],
      courtCode: null,
      tribunalCode: this.tribunal,
      host: {
        tribunalCode: this.tribunal,
        typeId: '2'
      }
    }
  },
  watch: {
    tribunal6(newvalue) {
      this.host.tribunalCode = newvalue
      if (this.host.tribunalCode != null) {
        this.getAllTribunalEquipmentListByType()
      }
    }
  },
  created() {
  },
  methods: {
    // https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
    createVideo(url) {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement')
        var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: url, // 你的url地址
          isLive: true
        })
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        flvPlayer.play()
      }
    },
    getAllTribunalEquipmentListByType() {
      getAllTribunalEquipmentListByType(this.host).then(response => {
        this.hostList = response.data
        if (this.hostList.length > 0) {
          this.createVideo(this.hostList[0].videoUrl)
          if (this.hostList[0].onLine === undefined) {
            this.hostList[0].onLine = false
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

     .camera3 {
      width: 46.5%;
      height: 110px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      text-align: center;
      margin-left: 25px;
      border-radius: 5px;
      // background-image: linear-gradient(to top,#FFBEBE,#FD2A2A);
    }
    .bg-purple2 {
    // background: #011C53;
    // opacity: 0.7;
    background: rgb(1,28,83);
    height: 110px;
  }
</style>
